<template>
	<view class="examine">
		<view class="header_box">
			<view class="head_title s28 familytow fblod">推荐人信息</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">推荐人</view>
					<view class="right_txt s26 family f500">
						{{ detail.user.nickname }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">联系方式</view>
					<view class="right_txt s26 family f500">
						{{ detail.user.mobile }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">会员级别</view>
					<view class="right_txt s26 family f500">
						{{ detail.user.identity_name }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">推荐日期</view>
					<view class="right_txt s26 family f500">
						{{ get_date(detail.createtime) }}
					</view>
				</view>
			</view>
		</view>
		<view class="customer_box">
			<view class="customer_txt s28 familytow fblod">客户信息</view>
			<view class="c_user_info_box flex align-center justify-between" v-for="(item, index) in detail.scopes" :key="index">
				<view class="flex align-center flex-1">
					<view class="user_name_box">
						<image class="w100 h100" src="../static/name.png" mode=""></image>
					</view>
					<view class="user_name_txt s26 family f500 flex-1 text-overflow1">
						{{ item.username }}
					</view>
				</view>
				<view class="flex align-center">
					<view class="user_phone_box">
						<image class="w100 h100" src="../static/phone.png" mode=""></image>
					</view>
					<view class="user_name_txt s26 family f500">
						{{ item.mobile }}
					</view>
				</view>
			</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">生效时间</view>
					<view class="right_txt s26 family f500">
						{{ get_date(detail.createtime) || '' }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">生效审核</view>
					<view class="right_txt s26 family f500">人工审核</view>
				</view>
				<view class="list_box flex" style="width: unset; overflow: unset; text-overflow: unset; white-space: unset">
					<view class="left_txt s26 family f500">意向产品</view>
					<view class="right_txt s26 family f500" style="word-wrap: break-word; flex: 1">
						<!-- {{detail.product[0].name || ''}} -->
						{{ detail.products || '' }}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btn flex">
			<view class="left_btn s32 familytow fblod txtali" @click="jujue">拒绝</view>
			<view class="right_btn s32 familytow fblod txtali" @click="agree">同意</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: {}
		};
	},
	onLoad(options) {
		this.getDetail(options.id, options.status, options.shopId);
	},
	methods: {
		getDetail(id, status, shopId) {
			this.$request({
				url: 'manage/getCustomDetail',
				method: 'GET',
				data: {
					id: id
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.scopes.map((item) => {
						item.mobile = item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
					});
					data.user.mobile = data.user.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
					this.detail = data;
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		agree() {
			this.$request({
				url: 'manage/setCustomStataus',
				data: {
					id: this.detail.id,
					status: 6
				}
			}).then((res) => {
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 2000
				});
				if (res.data.code == 1) {
					setTimeout(() => {
						uni.navigateBack({});
					}, 2001);
				}
			});
		},
		jujue() {
			uni.navigateTo({
				url: '/pages/filePages/reason/reason?id=' + this.detail.id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.examine {
	overflow: hidden;

	.bottom_btn {
		margin-left: 30upx;
		margin-top: 40upx;

		.left_btn {
			width: 334upx;
			height: 100upx;
			background: #a1a1a1;
			border-radius: 50upx;
			color: #fff;
			line-height: 100upx;
		}

		.right_btn {
			width: 334upx;
			height: 100upx;
			background: #ebbe87;
			border-radius: 50upx;
			color: #fff;
			line-height: 100upx;
			margin-left: 18upx;
		}
	}

	.customer_box {
		width: 686upx;
		background: #fff;
		border-radius: 8upx;
		margin: 20upx auto;
		overflow: hidden;

		.customer_txt {
			margin-left: 40upx;
			margin-top: 28upx;
			color: #e4b77f;
		}

		.c_user_info_box {
			width: 624upx;
			height: 70upx;
			background: #fafafa;
			border-radius: 4upx;
			margin-left: 32upx;

			.user_name_box {
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				margin: 0 0 0 20upx;
				font-size: 0;
			}

			.user_name_txt {
				color: #666;
				line-height: 70upx;
				margin-left: 20upx;
			}

			.user_phone_box {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				font-size: 0;
			}
		}

		.c_user_info_box:nth-child(2) {
			margin-top: 32upx;
		}

		.detail_box {
			margin-top: 32upx;
			flex-wrap: wrap;
			margin-left: 32upx;

			.list_box {
				width: 292upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 26upx;
				&:nth-of-type(2) {
					margin-left: 28upx;
				}

				.left_txt {
					width: 104upx;
					color: #999;
				}

				.right_txt {
					color: #333;
					margin-left: 16upx;
				}
			}
		}
	}

	.header_box {
		width: 686upx;
		height: 224upx;
		background: #fff;
		border-radius: 8upx;
		margin: 20upx auto;
		padding: 28upx 0 0 32upx;
		box-sizing: border-box;

		.head_title {
			color: #666;
		}

		.detail_box {
			margin-top: 32upx;
			flex-wrap: wrap;

			.list_box {
				width: 50%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 26upx;
				.left_txt {
					width: 104upx;
					color: #999;
				}

				.right_txt {
					color: #333;
					margin-left: 16upx;
				}
			}
		}
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
